<template>
  <div>
    <Page auto-content-height>
      <Grid table-title="案例展示">
        <template #web-url="{ row }">
          <span>{{ row.linkPrefix + row.linkUrl }}</span>
        </template>
        <template #toolbar-tools>
          <Button type="primary" @click="openDrawer({})"> 新增 </Button>
        </template>
        <template #action="{ row }">
          <Button type="link" @click="openDrawer(row)">编辑</Button>
          <Popover title="" placement="bottom">
            <template #content>
              <Popconfirm
                title="确定要删除该数据？"
                @confirm="() => handleRemove(row)"
              >
                <Button type="link">删除</Button>
              </Popconfirm>
            </template>
            <Button type="link">更多</Button>
          </Popover>
        </template>
      </Grid>
    </Page>
    <Drawer ref="dictDrawer" @success="() => gridApi.query()" />
  </div>
</template>

<script lang="ts" setup>
import { Page, useVbenDrawer } from '@vben/common-ui';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { onMounted, ref } from 'vue';
import { formOptions, gridOptions, idKey } from './data/options';
import { queryRemove } from './data/api';
import { Button, Popconfirm, Popover, message, Tag } from 'ant-design-vue';
import EditDrawer from './components/editDrawer.vue';

const [Drawer, drawerApi] = useVbenDrawer({
  connectedComponent: EditDrawer,
});
const dictDrawer = ref(null);

onMounted(() => {
  initData();
});

//  初始化数据
const initData = async () => {
  console.log('initData');
};

//  表格配置
const [Grid, gridApi] = useVbenVxeGrid({
  formOptions,
  gridOptions,
});

// 打开抽屉
const openDrawer = (row: any) => {
  drawerApi.setData({
    ...row,
  });
  drawerApi.open();
};

// 删除
const handleRemove = async (row: any) => {
  let params = <any>{};
  params[idKey.value] = row[idKey.value];
  let res: any = await queryRemove(params);
  console.log(res);
  message.success(res.message);
  await gridApi.query();
};
</script>
